<template>
  <div>
    <Header  @change="chagedata" />
    <!-- 搜索过的结果显示 -->
    <div v-show="flag" >
      <!-- 查询到相关新闻显示 -->
      <div v-if="data.length" >
        <div v-for="(item,index) in data" :key="index" class="searchend">
            <router-link  :to="`/media?newsId=${item.newsId}`">
          <h2>
            {{item.newstitle}}</h2>
            </router-link>
            
          <img :src="item.newsimg" alt="">
        </div>
        <div class="searchend">
          <h2>没有了哦....</h2>
        </div>
      </div>
      <!-- 没有数据显示 -->
      <div v-else>啥也没查到...</div>
          </div>
    <div v-show="!flag" class="want">
      <div>
        <p >1:你是不是想预约看展？</p>
      <van-button icon="https://img01.yzcdn.cn/vant/user-active.png" type="info">点这里</van-button>
      <p>2:你是不是想看新闻？</p>
      <van-button icon="https://img01.yzcdn.cn/vant/user-active.png" type="info">点这里</van-button>
      <p>3:你是不是想小姐姐？</p>
      <van-button icon="https://img01.yzcdn.cn/vant/user-active.png" type="info">点这里</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import Header from '../components/Header.vue'
  export default {
  components: { Header },
  data() {
    return {
      data: [],
      // 默认还没搜索
      flag: false
    }
  },
  methods: {
    chagedata(data) {
      //子传来的数据
      console.log(data, "data aaa");
      //保存子组件传来的数据保存到本地
      this.data=data
      //变成了object
      console.log('本地data数据'+this.data);
      // 代表搜索过
      this.flag = true;
    }
  },
  mounted () {
    // this.chagedata();
  },
  }
</script>

<style lang="scss" scoped>
.searchend{
  padding: 6px 20px;
  text-align: left;
  img{
    width: 100%;
  }
  h2{
    color: black;
    font-size: 20px;
    margin: 6px;
  }
}
.want{
  div{
    p{
    font-size: 18px;
  }}

}
</style>